import React from 'react'
import { Button, Form, Input, Select, DatePicker } from 'antd';
const { Option } = Select;
const { RangePicker } = DatePicker;
const rangeConfig = {
  rules: [
    {
      type: 'array',
      required: true,
      message: '请选择时间',
    },
  ],
};

const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 16,
  },
};

const tailLayout = {
  wrapperCol: {
    offset: 17,
    span: 16,
  },
};
export default function MenuMange() {
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log(values);
  };
  const onReset = () => {
    form.resetFields();
  };

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} className="f-c-c">
      {/* //用户名表单 */}
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            required: true,
          },
        ]}
        className='f-c-a'
      >
        <Input />
      </Form.Item>
      {/* //部门表单 */}
      <Form.Item
        name="gender"
        label="部门:"
        rules={[
          {
            required: true,
          },
        ]}
        className='f-c-a'
      >
        <Select
          placeholder="请选择所在部门"
          allowClear
        >
          <Option value="开发部">开发部</Option>
          <Option value="市场部">市场部</Option>
          <Option value="人事部">人事部</Option>
          <Option value="测试部">测试部</Option>
        </Select>
      </Form.Item>
      {/* //时间表单 */}
      <Form.Item
        name="range-time-picker"
        label="创建时间"
        {...rangeConfig}
        rules={[
          {
            required: true,
          },
        ]}
        className='f-c-a'

      >
        <RangePicker showTime format="年-月-日 小时:分钟:秒" />
      </Form.Item>

      <Form.Item {...tailLayout} className='f-c-a f-c-b'>
        <Button type="primary" htmlType="submit">
          确定
        </Button>
        <Button htmlType="button" onClick={onReset}>
          重置
        </Button>

      </Form.Item>


      {/* // 新增 删除等操作 */}
      <Form.Item className='f-c-f'>
        <Button className='face'>
          新增
        </Button>
        <Button className='face'>
          删除
        </Button>

        <Select placeholder='更多操作' style={{ width: '100px', marginLeft: '15px' }}>
          <Option value="">导出Excel</Option>
        </Select>
      </Form.Item>



    </Form>

  )
}
